<template>
  <div class="table-chart-container">
    <h3 v-if="options.title" class="table-title">{{ options.title }}</h3>
    <div class="table-wrapper">
      <a-table
        :columns="tableColumns"
        :data-source="tableData"
        :pagination="options.pagination"
        :scroll="{ y: tableHeight }"
        size="small"
        :bordered="options.bordered !== false"
        :row-key="options.rowKey || 'key'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, onMounted, watch } from 'vue';
import { Table } from 'ant-design-vue';

const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({
      title: '表格',
      columns: [
        { title: '列1', dataIndex: 'col1', key: 'col1' },
        { title: '列2', dataIndex: 'col2', key: 'col2' },
        { title: '列3', dataIndex: 'col3', key: 'col3' }
      ],
      dataSource: [
        { key: '1', col1: '数据1-1', col2: '数据1-2', col3: '数据1-3' },
        { key: '2', col1: '数据2-1', col2: '数据2-2', col3: '数据2-3' },
        { key: '3', col1: '数据3-1', col2: '数据3-2', col3: '数据3-3' }
      ],
      pagination: false,
      bordered: true,
      rowKey: 'key',
      headerBackground: '#fafafa',
      headerTextColor: '#262626',
      rowBackground: '#ffffff',
      rowTextColor: '#262626',
      fontSize: 14,
      headerFontSize: 14
    })
  }
});

// 计算表格高度，留出标题空间
const tableHeight = ref(300);
const recalculateHeight = () => {
  const containerHeight = document.querySelector('.table-chart-container')?.clientHeight || 400;
  const titleHeight = document.querySelector('.table-title')?.clientHeight || 0;
  const paddingSpace = 20; // 留出一些内边距
  
  tableHeight.value = containerHeight - titleHeight - paddingSpace;
};

// 处理表格列配置
const tableColumns = computed(() => {
  return (props.options.columns || []).map((col: { title: string | { toString(): string } }) => ({
    ...col,
    // 应用自定义样式到表头
    title: typeof col.title === 'string' ? col.title : col.title?.toString() || '',
    customHeaderCell: () => ({
      style: {
        background: props.options.headerBackground || '#fafafa',
        color: props.options.headerTextColor || '#262626',
        fontSize: `${props.options.headerFontSize || 14}px`
      }
    }),
    // 应用自定义样式到单元格
    customCell: () => ({
      style: {
        background: props.options.rowBackground || '#ffffff',
        color: props.options.rowTextColor || '#262626',
        fontSize: `${props.options.fontSize || 14}px`
      }
    })
  }));
});

// 处理表格数据源
const tableData = computed(() => {
  return props.options.dataSource || [];
});

// 监听窗口大小变化，重新计算表格高度
const handleResize = () => {
  recalculateHeight();
};

// 初始化时计算高度
onMounted(() => {
  window.addEventListener('resize', handleResize);
  setTimeout(recalculateHeight, 0);
});

// 监听配置变化，重新计算高度
watch(() => props.options, () => {
  setTimeout(recalculateHeight, 0);
}, { deep: true });

// 在组件卸载时移除事件监听
const beforeUnmount = () => {
  window.removeEventListener('resize', handleResize);
};
</script>

<style scoped>
.table-chart-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.table-title {
  margin: 10px 0;
  padding: 0 10px;
  font-size: v-bind('`${props.options.titleFontSize || 16}px`');
  font-weight: 500;
  color: v-bind('props.options.titleColor || "#262626"');
  text-align: center;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  padding: 0 4px;
}

:deep(.ant-table-small) {
  font-size: v-bind('`${props.options.fontSize || 14}px`');
}

:deep(.ant-table-thead > tr > th) {
  background: v-bind('props.options.headerBackground || "#fafafa"');
  color: v-bind('props.options.headerTextColor || "#262626"');
  font-size: v-bind('`${props.options.headerFontSize || 14}px`');
  font-weight: 500;
  transition: background 0.3s ease;
}

:deep(.ant-table-tbody > tr > td) {
  background: v-bind('props.options.rowBackground || "#ffffff"');
  color: v-bind('props.options.rowTextColor || "#262626"');
  font-size: v-bind('`${props.options.fontSize || 14}px`');
  transition: background 0.3s ease;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: #f5f5f5;
}
</style> 